{% extends "base/nav.html" %}
{% load static %}

{% block title %}删除景点 - 旅游舆情监测系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <!-- 删除确认卡片 -->
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-exclamation-triangle"></i> 删除景点确认
                    </h3>
                </div>
                <div class="panel-body">
                    <!-- 警告信息 -->
                    <div class="alert alert-danger">
                        <h4><i class="fa fa-warning"></i> 警告：此操作不可恢复！</h4>
                        <p>您即将删除一个景点，该操作将永久删除景点信息及相关数据。</p>
                    </div>

                    <!-- 景点信息概览 -->
                    <div class="attraction-preview">
                        <div class="row">
                            <div class="col-md-4">
                                {% if object.image %}
                                    <img src="{{ object.image.url }}" alt="{{ object.name }}"
                                         class="img-responsive img-thumbnail">
                                {% else %}
                                    <img src="{% static 'images/default-attraction.jpg' %}" alt="默认图片"
                                         class="img-responsive img-thumbnail">
                                {% endif %}
                            </div>
                            <div class="col-md-8">
                                <h4>{{ object.name }}</h4>
                                <table class="table table-condensed">
                                    <tr>
                                        <td><strong>位置：</strong></td>
                                        <td>{{ object.location }}</td>
                                    </tr>
                                    {% if object.city %}
                                    <tr>
                                        <td><strong>城市：</strong></td>
                                        <td>{{ object.city }}</td>
                                    </tr>
                                    {% endif %}
                                    <tr>
                                        <td><strong>分类：</strong></td>
                                        <td>{{ object.category.name }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>创建时间：</strong></td>
                                        <td>{{ object.created_at|date:"Y-m-d H:i" }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>浏览次数：</strong></td>
                                        <td>{{ object.view_count }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>评论数量：</strong></td>
                                        <td>{{ object.comments.count }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 删除影响警告 -->
                    <div class="impact-warning alert alert-warning">
                        <h5><i class="fa fa-info-circle"></i> 删除后将影响以下数据：</h5>
                        <ul>
                            <li>景点基本信息将被永久删除</li>
                            <li>所有用户评论将被删除（共 {{ object.comments.count }} 条评论）</li>
                            <li>所有用户收藏记录将被删除</li>
                            <li>相关图片文件将被删除</li>
                            <li>舆情分析数据将丢失</li>
                        </ul>
                    </div>

                    <!-- 删除表单 -->
                    <form method="post">
                        {% csrf_token %}

                        <!-- 安全确认 -->
                        <div class="form-group">
                            <label for="confirmText" class="text-danger">
                                <i class="fa fa-keyboard-o"></i>
                                请输入景点名称 "<strong>{{ object.name }}</strong>" 以确认删除：
                            </label>
                            <input type="text" id="confirmText" class="form-control"
                                   placeholder="请输入景点名称确认删除"
                                   oninput="checkConfirmation(this)">
                            <small class="help-block">此安全措施用于防止误删操作</small>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <button type="submit" id="deleteBtn" class="btn btn-danger btn-block" disabled>
                                        <i class="fa fa-trash"></i> 确认删除
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <!-- 使用正确的URL名称和命名空间 -->
                                    <a href="{% url 'main:attraction_detail' object.pk %}" class="btn btn-default btn-block">
                                        <i class="fa fa-arrow-left"></i> 返回详情页
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 取消链接 -->
                        <div class="text-center">
                            <!-- 使用正确的URL名称和命名空间 -->
                            <a href="{% url 'main:attraction_list' %}" class="text-muted">
                                <i class="fa fa-list"></i> 返回景点列表
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 管理员选项 -->
            {% if user.is_staff %}
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fa fa-cog"></i> 管理员选项
                    </h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{% url 'admin:main_touristattraction_change' object.pk %}"
                               class="btn btn-info btn-block" target="_blank">
                                <i class="fa fa-edit"></i> 后台编辑
                            </a>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-warning btn-block" onclick="archiveAttraction()">
                                <i class="fa fa-archive"></i> 归档而非删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
/* 删除页面特定样式 */
.panel-danger {
    border-color: #d9534f;
}

.panel-danger > .panel-heading {
    background-color: #d9534f;
    border-color: #d9534f;
    color: white;
}

.attraction-preview {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 15px;
    margin: 20px 0;
}

.impact-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.impact-warning ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.impact-warning li {
    margin-bottom: 5px;
}

/* 表单控件样式 */
#confirmText {
    border: 2px solid #ddd;
    transition: all 0.3s ease;
}

#confirmText:focus {
    border-color: #d9534f;
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.3);
}

#confirmText.valid {
    border-color: #5cb85c;
    box-shadow: 0 0 5px rgba(92, 184, 92, 0.3);
}

#deleteBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#deleteBtn:not(:disabled):hover {
    background-color: #c9302c;
    border-color: #ac2925;
}
</style>

<script>
// 确认文本检查
function checkConfirmation(input) {
    const expectedText = "{{ object.name }}";
    const deleteBtn = document.getElementById('deleteBtn');

    if (input.value === expectedText) {
        input.classList.add('valid');
        deleteBtn.disabled = false;
    } else {
        input.classList.remove('valid');
        deleteBtn.disabled = true;
    }
}

// 页面加载完成后的操作
document.addEventListener('DOMContentLoaded', function() {
    // 聚焦到确认输入框
    const confirmInput = document.getElementById('confirmText');
    if (confirmInput) {
        confirmInput.focus();
    }
});
</script>

{% endblock %}